<template>
  <div>
    <div class="dom1" id="dom1Ref">
        <div class="box">
            <div class="tr" v-for="(t,i) in spotData" :key="i">
                <div class="spot" :ref="item.id" v-for="(item, index) in t.data" :key="index" :data-id="item.id" @click="down(item.id)"></div>
            </div>
        </div>
    </div>
    <div class="dom2" id="dom2Ref">
        <div class="box">
            <div class="tr" v-for="(t,i) in spotData15" :key="i">
                <div class="lineX" v-for="(t,i) in spotData15" :key="i" :data-id="t.id"></div>
            </div>
        </div>
    </div>
    <div class="dom3" id="dom3Ref">
        <div class="box">
            <div class="tr" v-for="(t,i) in spotData14" :key="i">
                <div class="lineY" v-for="(t,i) in spotData15" :key="i" :data-id="t.id"></div>
            </div>
        </div>
    </div>
    <div class="signBox">
      <div>现在是轮到{{this.sign? '红色': '灰色'}}</div>
      <div :class="['piece', this.sign? 'red': 'ccc']"></div>
      <div class="backOne" @click="backOne">悔棋</div>
      <div class="beforeBackOne" @click="beforeBackOne">撤销悔棋</div>
    </div>
  </div>
</template>
<script>
var _mine
export default {
  data () {
    return {
      // 是否分出胜负
      isWinner: false,
      // 棋子坐标
      spotData: [],
      // 15个空数据
      spotData15: [],
      // 14个空数据
      spotData14: [],
      // 红棋
      blackSpot: [],
      // 灰棋
      whiteSpot: [],
      // 以此来判断是黑棋还是白棋，true是黑棋，false是白棋
      sign: false,
      // 点击的次数
      clickNum: 0,
      // 悔棋
      regret: [],
      // 已经放下棋子的格子
      downSpot: [],
      // 判定胜负用的规则
      rule1: { x: 0, y: 1 },
      rule2: { x: 0, y: -1 },
      rule3: { x: -1, y: 0 },
      rule4: { x: -1, y: 1 },
      rule5: { x: 1, y: 0 },
      rule6: { x: 1, y: -1 },
      rule7: { x: 1, y: 1 },
      rule8: { x: -1, y: -1 }
    }
  },
  methods: {
    // 悔棋
    backOne () {
      if (this.isWinner) return false
      if (this.downSpot.length === 0) return false
      const spotID = this.downSpot.pop()
      const spotColor = this.$refs[spotID][0].style.backgroundColor
      this.$refs[spotID][0].style.backgroundColor = ''
      this.regret.push({ spotID, spotColor })
      this.sign = !this.sign
      // 把删除的棋子塞回对应的数组
      if (this.sign) {
        this.whiteSpot.pop(spotID)
      } else {
        this.blackSpot.pop(spotID)
      }
    },
    // 撤销悔棋
    beforeBackOne () {
      if (this.isWinner) return false
      if (this.regret.length === 0) return false
      const { spotID, spotColor } = this.regret.pop()
      this.$refs[spotID][0].style.backgroundColor = spotColor
      this.downSpot.push(spotID)
      this.sign = !this.sign
      // 把删除的棋子塞回对应的数组
      if (this.sign) {
        this.whiteSpot.push(spotID)
      } else {
        this.blackSpot.push(spotID)
      }
    },
    // 点击
    down (t) {
      // 分出胜负不可再次点击，需重置
      if (this.isWinner) return false
      // 阻止点击一样的棋子会变色
      if (this.$refs[t][0].style.backgroundColor) return false
      // 点击的棋子未被点击过则正常执行
      this.sign = !this.sign
      if (this.sign) this.black(t)
      if (!this.sign) this.white(t)
      this.downSpot.push(t)
      this.clickNum++
    },
    // 分割坐标字符串
    resolv (str) {
      const x = Number(str.slice(0, 2))
      const y = Number(str.slice(2))
      return { x, y }
    },
    // 黑棋
    black (t) {
      this.$refs[t][0].style.backgroundColor = '#ccc'
      this.blackSpot.push(t)
      this.winner(t, this.blackSpot)
    },
    // 红棋
    white (t) {
      this.$refs[t][0].style.backgroundColor = '#f00'
      this.whiteSpot.push(t)
      this.winner(t, this.whiteSpot)
    },
    // 是否获胜
    winner (spot, spotArr) {
      let num = 0
      // 定义8个方向，根据传入的棋子和数组去查询是否满足胜利条件
      num = num + 0
      _mine.checkRule1(spot, spotArr, _mine.checkRule1, num)
      _mine.checkRule2(spot, spotArr, _mine.checkRule2, num)
      _mine.checkRule3(spot, spotArr, _mine.checkRule3, num)
      _mine.checkRule4(spot, spotArr, _mine.checkRule4, num)
      _mine.checkRule5(spot, spotArr, _mine.checkRule5, num)
      _mine.checkRule6(spot, spotArr, _mine.checkRule6, num)
      _mine.checkRule7(spot, spotArr, _mine.checkRule7, num)
      _mine.checkRule8(spot, spotArr, _mine.checkRule8, num)
    },
    checked (ID, spotArr, fn, num) {
      console.log(ID)
      console.log(spotArr)
      if (spotArr.indexOf(ID) === (-1)) {
        return
      }
      num++
      if (num >= 4) {
        alert((_mine.sign ? '灰色' : '红色') + 'win! 点击重置即可进行下一局')
        _mine.isWinner = true
        return
      }
      fn(ID, spotArr, fn, num)
    },
    checkRule1 (spot, spotArr, fn, num) {
      let { x, y } = _mine.resolv(spot)
      x = x + _mine.rule1.x
      x = x < 10 ? '0' + x : x
      y = y + _mine.rule1.y
      const ID = x + '' + y
      _mine.checked(ID, spotArr, fn, num)
    },
    checkRule2 (spot, spotArr, fn, num) {
      let { x, y } = _mine.resolv(spot)
      x = x + _mine.rule2.x
      x = x < 10 ? '0' + x : x
      y = y + _mine.rule2.y
      const ID = x + '' + y
      _mine.checked(ID, spotArr, fn, num)
    },
    checkRule3 (spot, spotArr, fn, num) {
      let { x, y } = _mine.resolv(spot)
      x = x + _mine.rule3.x
      x = x < 10 ? '0' + x : x
      y = y + _mine.rule3.y
      const ID = x + '' + y
      _mine.checked(ID, spotArr, fn, num)
    },
    checkRule4 (spot, spotArr, fn, num) {
      let { x, y } = _mine.resolv(spot)
      x = x + _mine.rule4.x
      x = x < 10 ? '0' + x : x
      y = y + _mine.rule4.y
      const ID = x + '' + y
      _mine.checked(ID, spotArr, fn, num)
    },
    checkRule5 (spot, spotArr, fn, num) {
      let { x, y } = _mine.resolv(spot)
      x = x + _mine.rule5.x
      x = x < 10 ? '0' + x : x
      y = y + _mine.rule5.y
      const ID = x + '' + y
      _mine.checked(ID, spotArr, fn, num)
    },
    checkRule6 (spot, spotArr, fn, num) {
      let { x, y } = _mine.resolv(spot)
      x = x + _mine.rule6.x
      x = x < 10 ? '0' + x : x
      y = y + _mine.rule6.y
      const ID = x + '' + y
      _mine.checked(ID, spotArr, fn, num)
    },
    checkRule7 (spot, spotArr, fn, num) {
      let { x, y } = _mine.resolv(spot)
      x = x + _mine.rule7.x
      x = x < 10 ? '0' + x : x
      y = y + _mine.rule7.y
      const ID = x + '' + y
      _mine.checked(ID, spotArr, fn, num)
    },
    checkRule8 (spot, spotArr, fn, num) {
      let { x, y } = _mine.resolv(spot)
      x = x + _mine.rule8.x
      x = x < 10 ? '0' + x : x
      y = y + _mine.rule8.y
      const ID = x + '' + y
      _mine.checked(ID, spotArr, fn, num)
    }
  },
  created () {},
  mounted () {
    _mine = this
    // mounted时用for生成数据
    for (let i = 0; i < 15; i++) {
      this.spotData15.push({})
      if (i < 14) this.spotData14.push({})
    }
    for (let i = 0; i < 15; i++) {
      const obj = {
        data: []
      }
      var id = i < 10 ? '0' + i : '' + i
      for (let i = 0; i < 15; i++) {
        const data = {
          id: id + i
        }
        obj.data.push(data)
      }
      this.spotData.push(obj)
    }
  }
}
</script>

<style lang='less' scoped>
.dom1 ,.dom2, .dom3{
    width: 600px;
    height: 600px;
    margin: 45px auto 0;
    display: flex;
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    .box{
        width: 100%;
        height: 100%;
    }
    .spot{
      width: 17px;
      height: 17px;
      border-radius: 50%;
      overflow: hidden;
      cursor: pointer;
    }
}
.tr{
    display: flex;
    width: 100%;
    height: 40px;
    justify-content: space-around;
    align-items: center;
}
.dom2{
    .lineX{
        width: 40px;
        height: 1px;
        background-color: #000;
    }
}
.dom3{
    .lineY{
        width: 1px;
        height: 40px;
        background-color: #000;
    }
}
.dom1{
    z-index: 10;
}
.dom2{
    width: 560px!important;
    z-index: 5;
}
.dom3{
    top: 35px;
    z-index: 0;
}
</style>
